<template>
  <ve-card :title="feeOption.feeName" :showDivider="showDivider" :customContentStyle="computeContentStyle" v-bind="$attrs">
    <!-- 详细费用 -->
    <template v-for="(feeDetailItem, feeDetailIndex) in feeOption.childrenList" :key="feeDetailIndex">
      <ve-form-item :label="feeDetailItem.showItemName || feeDetailItem.itemName" :labelWidth="200" unit="元">
        <ve-input-number :precision="2" :model-value="feeDetailItem.amount" @blur="(val) => (feeDetailItem.amount = val)" />
      </ve-form-item>
    </template>
    <ve-form-item label="赔款原因" size="1/2">
      <ve-picker-inline
        v-model="feeOption.compensateReason"
        placeholder="请选择"
        :range="sysDict.short_order_compensate_reason"
        unit="arrowRight"
      />
    </ve-form-item>
    <!-- 存在 feeOption.remarkLabel 显示备注录入 -->
    <ve-form-item v-if="feeOption.remarkLabel" class="mb-0" :label="feeOption.remarkLabel" :borderBottom="false" labelPosition="top">
      <ve-input type="textarea" v-model="feeOption.remark" :maxlength="200" />
    </ve-form-item>
  </ve-card>
</template>
<script setup>
  import { computed } from 'vue'
  import { useSysDict } from '@/hooks/useDict'
  const sysDict = useSysDict(['short_order_compensate_reason'])

  const props = defineProps({
    index: Number,
    list: Array,
    requiredKey: String,
    showDivider: {
      type: Boolean,
      default: true,
    },
    inlineCard: Boolean,
  })

  const computeContentStyle = computed(() => {
    if (props.inlineCard) {
      return {}
    } else {
      return { paddingBottom: 0 }
    }
  })

  const feeOption = computed(() => {
    return props.list[props.index]
  })
</script>
